<!-- 医院总收入/占比 -->
<template>
    <div id="income"></div>
</template>
<script>
import * as echarts from "echarts";
import { getTotalIncomeData } from "../../commonJs/data";
import Mock from 'mockjs'
export default {
    data() {
        return {};
    },
    mounted() {
        this.setEcharts()
    },
    methods: {
        //设置echarts

        setEcharts() {
            const money = new Array(5).fill(0).map(() => Mock.Random.natural(100000, 300000));
            var trafficWay = [
                {
                    name: "人民医院",
                    value: 0,
                },
                {
                    name: "二院",
                    value: 0,
                },
                {
                    name: "中医院",
                    value: 0,
                },
                {
                    name: "妇幼保健",
                    value: 0,
                },
                {
                    name: "乡镇卫生院",
                    value: 0,
                },
            ];
            // responseData.forEach((item, index) => {
            //     trafficWay[index].value = parseInt(item.VALUE1.split(".")[0]);
            // });
            money.forEach((item, index) => {
                trafficWay[index].value = parseInt(item);
            });
            let income = echarts.init(document.getElementById("income"));
            var img =
                "";

            var data = [];
            var color = ["#00ffff", "#00cfff", "#006ced", "#ffe000", "#ffa800"];
            for (var i = 0; i < trafficWay.length; i++) {
                data.push(
                    {
                        value: trafficWay[i].value,
                        name: trafficWay[i].name,
                        itemStyle: {
                            normal: {
                                borderWidth: 5,
                                shadowBlur: 20,
                                borderColor: color[i],
                                shadowColor: color[i],
                            },
                        },
                    },
                    {
                        value: 80000,
                        name: "",
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false,
                                },
                                labelLine: {
                                    show: false,
                                },
                                color: "rgba(0, 0, 0, 0)",
                                borderColor: "rgba(0, 0, 0, 0)",
                                borderWidth: 0,
                            },
                        },
                    }
                );
            }
            var seriesOption = [
                {
                    name: "",
                    type: "pie",
                    clockWise: false,
                    radius: [73, 77],
                    center: ["32%", "46%"],
                    hoverAnimation: false,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: "outside",
                                color: "#fff",
                                fontSize: 15,
                                formatter: function (params) {
                                    var percent = 0;
                                    var total = 0;
                                    for (
                                        var i = 0;
                                        i < trafficWay.length;
                                        i++
                                    ) {
                                        total += trafficWay[i].value;
                                    }
                                    percent = (
                                        (params.value / total) *
                                        100
                                    ).toFixed(0);
                                    if (params.name !== "") {
                                        return (
                                            params.name +
                                            "\n" +
                                            "占比：" +
                                            percent +
                                            "%"
                                        );
                                    } else {
                                        return "";
                                    }
                                },
                            },
                            labelLine: {
                                length: 1,
                                show: true,
                                color: "#fff",
                            },
                        },
                    },
                    data: data,
                },
            ];
            let option = {
                color: color,
                graphic: {
                    elements: [
                        {
                            type: "image",
                            z: 3,
                            style: {
                                image: img,
                                width: 118,
                                height: 118,
                            },
                            left: "20.6%",
                            top: "19.8%",
                            position: [0, 50],
                        },
                    ],
                },
                tooltip: {
                    show: false,
                },
                legend: {
                    icon: "circle",
                    orient: "horizontal",
                    // x: 'left',
                    data: trafficWay,
                    formatter: (name) => {
                        return (
                            "{title|" +
                            name +
                            "}  {value|" +
                            data.find((item) => {
                                return item.name == name;
                            }).value +
                            "}{value|元}"
                        );
                    },
                    textStyle: {
                        rich: {
                            title: {
                                width: 80,
                                fontSize: 16,
                                lineHeight: 20,
                                color: "#3bd2fe",
                            },
                            value: {
                                fontSize: 15,
                                lineHeight: 20,
                                color: "#fff",
                            },
                        },
                    },
                    left: "62.5%",
                    top: 10,
                    align: "left",
                    itemGap: 20,
                },
                toolbox: {
                    show: false,
                },
                series: seriesOption,
            };
            income.setOption(option);
        },
    },
};
</script>
<style lang="scss" scoped>
#income {
    width: 100%;
    height: 100%;
    padding-top: 20px;
}
</style>